<template>
	<page class="" ref='page'>
		<!-- 建材成 - 店铺 - detail wwl -->
		<view class="page">
			<view class="info_box" v-if='info && Object.keys(info).length > 0'>
				<view class="top">
					<image :src="info.avatar" class="left" mode=""></image>
					<view class="right">
						<view class="row" @click="$global.onMerchant(info.phone)">
							<image src="./static/img/telephone01.png" mode="scaleToFill"></image>
							<text>{{info.phone}}</text>
						</view>
						<view class="row" @click="$global.onOpenArea(info.latitude,info.longitude)">
							<image src="static/img/orientation03.png" mode=""></image>
							<text>{{info.address}}</text>
						</view>
					</view>
				</view>
				<view class="bottom" >
					<view class="left">
						<view class="row"  @click="onOperation(1,info.is_like == 1)">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/YDvHTYdV40Mr0Mes4DJXg1jvsLNjQROx8BQKkLFq.png" mode="" v-if="info.is_like == 1"></image>
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/lSK7pXE39wJeV96F13U88TjgX1x27kMYFehTvmxP.png" mode="" v-else></image>
							<text>{{info.like}}</text>
						</view>
						<view class="row"  @click="onOperation(2,info.is_collect == 1)">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/GKE0onhRAublBcECEMLlS2nmNNbLUClCpsTf1UVq.png" mode=""  v-if="info.is_collect == 1"></image>
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/UqCVIBO5Y4YcmClAqexlQz6jFzsfp7sT3HQv0Jm9.png" mode="" v-else></image>
							<text>{{info.collect}}</text>
						</view>
						<!-- #ifdef MP-WEIXIN  -->
						<button  class="row row2" open-type="share">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/y3es35peNBbC1bpkQQTfqsMPEjsLdlHTbJW14Nr9.png" mode=""></image>
							<text>{{info.transmit}}</text>
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN  -->
						<view class="row"  @click="onOperation(3,null)">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/y3es35peNBbC1bpkQQTfqsMPEjsLdlHTbJW14Nr9.png" mode=""></image>
							<text>{{info.transmit}}</text>
						</view>
						<!-- #endif -->
					</view>
					<view class="right3" @click="onChatphone(info.admin_phone)">
						免费咨询
					</view>
					<view class="right" @click="onChatRoom(info.id)">
						在线咨询
					</view>
					<button class=" right2" v-if="info.type == 4 && shouquan == 0"   @click="onApplyAuthorization(info.id)">
						申请授权
					</button>
				</view>
			</view>
			<view class="tab_row">
				<!-- :classification='3' -->
				<tabRow :list='tabList' @change='changeTab' ref='tabRow' />
			</view>
			<view class="list_box">
				<view v-if='list && list.length > 0'>
					<!-- <renovation-row :list='list' type='buildingMaterialsCity' :offer='offer' :duihuan='duihuan' /> -->
					<renovation-row :list='list' type='buildingMaterialsCity'  :page='page' :size='size' :yunshop='yunshop' :duihuan='duihuan' :shopaid='shopaid' />
					<loadingText :type="loading || page * size < total" />
					
				</view>
				<empty  :status='2' v-else/>
			</view>
			<foot />
		</view>
	</page>
</template>

<script>
	import {setLikeCollection,setAddShare} from "@/utils/postRequest.js"
	import {getIMAccid} from "@/utils/getRequest.js"
	import { getShopInfo ,getGoodsList} from "./static/api.js"
	import tabRow from "@/components/tab-row.vue"
	import renovationRow from "@/components/renovation-row.vue"
	export default {
		components: {
			tabRow,renovationRow
		},
		data(){
			return{
				id:null,
				shopaid:0,
				name:null,
				info:{},
				type:null,
				tabList: [],
				tabActive: 0,
				tabIndex: 0,
				page:1,
				size:10, 
				total:0,
				list:[],
				loading:false,
				duihuan:0,
				shouquan:0,
				yunshop:0,
				loading1:false,
				chatLoading:false,
				offer:'',
			}
		},
		onReachBottom(x){
			if(this.page * this.size >= this.total || this.loading) return
			this.page ++
			this.getList()
		},
		async onShareAppMessage(res) {
			await setAddShare({id:this.id,type:8,isErr:false})
			this.info.transmit = Number(this.info.transmit) + 1
			return {
				title: this.info.name,
				imageUrl:this.info.avatar,
				path: `/pagesCommodity/shopDetailsBuilding?type=${this.type}&id=${this.id}&name=${encodeURIComponent(this.name)}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
			};
		},
		async onShareTimeline(res) {
			await setAddShare({id:this.id,type:8,isErr:false})
			this.info.transmit = Number(this.info.transmit) + 1
			return {
				title: this.info.name,
				imageUrl:this.info.avatar,
				path: `/pagesCommodity/shopDetailsBuilding?type=${this.type}&id=${this.id}&name=${encodeURIComponent(this.name)}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
			};
		},
		methods: {
			onChatphone(phone){
				// #ifdef APP-PLUS
				
				
				plus.android.requestPermissions(
					["android.permission.CALL_PHONE"], 
					function(resultObj) {
						var result = 0;
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
							result = 1
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
							result = 0
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
							result = -1
						}
						console.log(result);
						if(result == 1){
							uni.makePhoneCall({
								 phoneNumber: phone.toString(),//电话号码
								success(ress) {
									console.log("拨打电话成功",ress)
								},
								fail(err) {
									console.log("拨打电话失败",'err')
								}
							});
						}else{
							uni.showToast({
								title:"请开启拨号权限",
								icon:"error",
							})
						}
					},
					function(error) {
						console.log('申请权限错误：' + error.code + " = " + error.message);
					}
				);
				// #endif
				// #ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber:phone.toString(),//电话号码
					success:function(e){
						console.log(e,'成功');
					},
					fail:function(e){
						console.log(e,'失败');
				 
					}
				})
				// #endif
			},
			async onApplyAuthorization(id){
				uni.navigateTo({
					url:'/pagesCommodity/authorizationApplication?id=' + id
				})
			},
			async onChatRoom(id){
				if(!this.$store.getters.userInfo){
					return this.$global.getUserInfo()
				}
				if(this.chatLoading) return
				this.chatLoading = true
				uni.showLoading({mask:true})
				try{
					var res = await getIMAccid({id})
					if(this.$store.getters.userInfo.accid == res.id) return uni.showToast({title:'不能与自己聊天哦～',icon:'none'})
					this.$store.commit('set_chat_to',res)
					this.chatLoading = false
					uni.hideLoading()
					uni.navigateTo({
						url:'/pagesChat/chatRoom?char_type=1&shopping_id='+id+'&chat_toname='+res.name
					})
				}catch{
					this.chatLoading = false
					uni.hideLoading()
				}
				
			},
			async onOperation(type, flag) {
				if(!this.$store.getters.userInfo){
					return this.$global.getUserInfo()
				}
				if (type != 3) {
					if (this.loading1) return
					this.loading1 = true
					try {
						var res = await setLikeCollection({
							flag: flag,
							status: type,
							id:this.info.id,
							type: 8 
						})
						this.loading1 = false
						if (type == 1) {
							if (flag) {
								this.info.is_like = 2
								this.info.like = Number(this.info.like) - 1
							} else {
								this.info.is_like = 1
								this.info.like = Number(this.info.like) + 1
							}
							if( this.info.like != this.info.like2){
								this.$global.$editUploadBack(1,`buildingMaterialClassificationsCityLike?id=${this.id}&like=${this.info.like}`)
							}else{
								var option = this.$global.$editUploadBack(4, 'buildingMaterialClassificationsCityLike') 
							}
						} else {
							if (flag) {
								this.info.is_collect = 2
								this.info.collect = Number(this.info.collect) -1
							} else {
								this.info.is_collect = 1
								this.info.collect = Number(this.info.collect) + 1
							}
						}
			
					} catch {
						uni.showToast({title:'操作失败',icon:'none'})
						this.loading1 = false
					}
				} else {
					this.onShare()
				}
			
			},
			onShare(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 5,
					miniProgram:{
						id:this.$global.originalId,
						path:`/pagesCommodity/shopDetailsBuilding?type=${this.type}&id=${this.id}&name=${encodeURIComponent(this.name)}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
						type:this.$global.environment == 'development' ? 2 : 0,
						webUrl:"https://www.baidu.com"
					},
				    title: this.info.name,
				    imageUrl:this.$global.shareImg,
				    success: (res)=> {
						setAddShare({type: 8 ,id:this.info.id,isErr:false}).then(()=>{
							 this.info.transmit ++ 
						})
				    },
				    fail: function (err) {
						console.log(JSON.stringify(err))
				    }
				});
			},
			async getInfo(){
				uni.showLoading()
				this.loading = true
				try{
					var res = await getShopInfo({id:this.id})
					if(res.type == 5){
						this.shopaid = res.id
					}
					this.info = res
					uni.setNavigationBarTitle({
						title: res.name
					});
					await this.getTabList()
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			getTabList(){
				this.tabList = [
					{id: 'sort', name: "综合"},
					{id: 'sale_num', name: "销量优先"},
					{id: 'created_at', name: "新品"}
				]
				this.getList()
			},
			async getList(){
				if(this.page == 1) uni.showLoading()
				this.loading = true
				try{
					var res = await getGoodsList({id:this.id,order_by:this.tabActive,page:this.page,limit:this.size})
					this.list = this.page == 1 ? res.list : [...this.list,...res.list],
					console.log(this.list,'商品列表')
					this.total = res.count
					if(this.page == 1) uni.hideLoading()
					this.loading = false
				}catch{
					this.loading = false
					uni.hideLoading()
				}
			},
			changeTab(x) {
				this.tabActive = x
				this.page = 1
				this.total = 0
				this.getList()
			},
		},
		onReady(){
			if(!this.tabActive){
				this.tabActive =  'sort'
				this.$refs.tabRow.active = 'sort'
			}
		},
		onLoad(params){
			if(params.offer) this.offer = params.offer
			if(params.duihuan) this.duihuan = params.duihuan
			if(params.yunshop) this.yunshop = params.yunshop
			if(params.shouquan) this.shouquan = params.shouquan
			this.id = params.id
			this.type = params.type
			// if(params.name){
			// 	this.name =  decodeURIComponent(params.name)
			// 	uni.setNavigationBarTitle({
			// 	    title: this.name
			// 	});
			// }
			this.getInfo()
			
		}
	}
</script>

<style lang="scss" scoped>
	.right2{
		margin-top: 20rpx;
		height: 50rpx;
		
		border-radius: 27rpx;
		font-size: 24rpx;
		text-align: center;
		display: inline-block;
		
		width: 136rpx;
		line-height: 50rpx;
		border:0;
		color:#fff;
		margin-top: 0rpx;
		margin-left:10rpx;
		background-color: $theme;
		    display: inline;
		    padding: 0px 0px 0px 0px;
	}
	.info_box{
		padding: 36rpx 36rpx 46rpx;
		background-color: #f6f7fb;
		width: 100%;
		box-sizing: border-box;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.left{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
			.right{
				width: calc(100% - 102rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.row{
					display: flex;
					justify-content: space-between;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-top: 6rpx;
					}
					text{
						width: calc(100% - 40rpx );
						text-align: left;
						color:#26252B;
						font-size: 26rpx;
						line-height: 36rpx;
					}
					&:last-child{
						margin-top: 16rpx;
					}
				}
			}
		}
		.bottom{
			margin-top: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				width: calc(100% - 146rpx);
				display: flex;
				align-items: center;
				.row{
					display: inline-block;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
						vertical-align: middle;
					}
					text{
						font-size: 24rpx;
						line-height: 34rpx;
						color:#ADADAD;
					}
					margin-left:48rpx;
					&:first-child{
						margin-left:0;
					}
				}
				.row2{
					// height: 34rpx;
					line-height: 34rpx;
					background-color: transparent
				}
			}
			.right{
				width: 136rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid $theme;
				border-radius: 27rpx;
				font-size: 24rpx;
				color:$theme;
				text-align: center;
			}
			
			.right3{
				width: 116rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid $theme;
				border-radius: 27rpx;
				font-size: 24rpx;
				color:$theme;
				text-align: center;
				position: absolute;
				    top: 116rpx;
				    right: 36rpx;
				
			}
		}
	}
	.tab_row{
		padding: 40rpx 36rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.list_box{
		padding: 0 36rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 30vh;
	}
	button[loading]::before {
		align-self: center
	}
	
	button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-item: center;
		padding: 0;
	}
	
	button::after {
		border: none;
	}
</style>
